<!--
 * @Description: 文章类型
 * @Author: Huang Junjie
 * @Date: 2021-04-26 18:45:15
 * @LastEditTime: 2021-06-18 14:47:08
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="article-management-style app-container h-flex">
    <!-- 左边 -->
    <div v-loading="leftLoading" class="app-container__left tree-box">
      <div class="type-title">文章类型</div>
      <ul class="type-list">
        <li
          v-for="(item, index) in articleTypeArr"
          :key="`a${index}`"
          :class="articleType.dictionaryId === item.dictionaryId ? 'active' : ''"
          @click.stop="changeArticleType(item)"
        >{{ item.itemName }}<a style="color: #4021FF" @click.stop="goToArticleMoreView(item.dictionaryId)"> 测试更多</a></li>
      </ul>
    </div>
    <!-- 左边 -->

    <!-- 右边 -->
    <div ref="container" class="app-container__right h-flex-elastic v-flex overflow-hidden">
      <div style="height: 20px;width: 100%;background-color: #ffffff;" />
      <!-- 表格 -->
      <div ref="main" class="v-flex-elastic table-style">
        <base-table
          :height="height"
          :loading="tableLoading"
          :data="tableData.list"
          :columns="baseTableOption.columns"
          :show-index="baseTableOption.showIndex"
          :show-selection="baseTableOption.showSelection"
          :show-operation="baseTableOption.showOperation"
          :show-filter-column="baseTableOption.showFilterColumn"
          :operaton-width="baseTableOption.operatonWidth"
          :default-operations="baseTableOption.defaultOperations"
          :has-auth="baseTableOption.hasAuth"
          :row-show-color="baseTableOption.rowShowColor"
        >
          <template slot="operations" slot-scope="{ row, $index }">
            <el-button
              class="el-icon-defined"
              size="mini"
              @click.stop="openArticleDialog(row, $index)"
            >
              首页查看详情示例
            </el-button>
            <el-button
              class="el-icon-defined"
              size="mini"
              icon="el-icon-view"
              @click.stop="goToArticleDetailView(row.id)"
            />
          </template>
        </base-table>
      </div>
      <!-- 表格 -->

      <!-- 分页 -->
      <div class="page-box">
        <pagination
          :total="tableData.total"
          :page.sync="getDataListData.page"
          :size.sync="getDataListData.size"
          @pagination="changePageOption"
        />
      </div>
      <!-- 分页 -->
    </div>
    <!-- 右边 -->

    <!-- 文章详情弹框 -->
    <article-detail-dialog
      :dialog="viewDialog"
      :row-index="rowIndex"
      :table-data="tableData.list"
      @clickPrev="rowIndex = rowIndex - 1"
      @clickNext="rowIndex = rowIndex + 1"
    />
    <!-- 文章详情弹框 -->
  </div>
</template>

<script>
import { getDataList as getArticleTypeDataList } from '@/api/jjxt/production-safety/integrated-management/configuration-management/information-delivery/article-type-management';
import { getDataList } from '@/api/jjxt/production-safety/integrated-management/configuration-management/information-delivery/article-management';
import { getDatatime } from '@/utils';
import { tableMixin } from '@/utils/public';
import ArticleDetailDialog from '@/views/jjxt/components/ArticleDetailDialog';

export default {
  name: 'ArticleView',
  components: {
    ArticleDetailDialog
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,

      // loading
      leftLoading: false,
      tableLoading: false,

      // 当前选中的文章类型
      articleType: {},

      // 文章类型数组
      articleTypeArr: [],

      // 查询列表请求参数
      getDataListData: {
        articleType: '',
        page: 1,
        size: 20
      },

      // 表格数组
      tableData: {
        list: [],
        total: 0
      },

      // baseTable组件配置
      baseTableOption: {
        columns: [
          { prop: 'title', label: '标题' },
          { prop: 'itemName', label: '类型' },
          { prop: 'uploadName', label: '发布人' },
          { prop: 'createDatetime', label: '发布时间' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '200px',
        defaultOperations: [],
        hasAuth: false,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 查看的行数据的index
      rowIndex: 0,

      // 查看文章详情弹框
      viewDialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        showDefaultFooter: false,
        showFullscreen: false
      }
    };
  },
  mounted() {
    this.getArticleTypeDataList(); // 文章类型列表
  },
  methods: {
    // 文章类型列表
    getArticleTypeDataList() {
      this.leftLoading = true;
      getArticleTypeDataList({ dtId: 'BUREAU_ARTICLE000001' }).then(res => {
        this.leftLoading = false;
        this.articleTypeArr = res.data;
        if (!this.$route.query.dictionaryId) {
          this.articleType = this.articleTypeArr[0];
          this.getDataList(); // 查询列表
        } else {
          let index = null;
          this.articleTypeArr.filter((val, key) => {
            if (this.$route.query.dictionaryId === val.dictionaryId) {
              index = key;
            }
          });
          if (index !== null) {
            this.articleType = this.articleTypeArr[index];
          } else {
            this.articleType = this.articleTypeArr[0];
          }
          this.getDataList(); // 查询列表
        }
      }).catch(() => {
        this.leftLoading = false;
      });
    },

    // 分页查询
    getDataList() {
      this.tableLoading = true;
      this.getDataListData.articleType = this.articleType.dictionaryId;
      getDataList(this.getDataListData).then(res => {
        this.tableLoading = false;
        res.data.records.forEach(val => {
          val.createDatetime = getDatatime(new Date(val.createDatetime));
        });
        this.tableData = {
          list: res.data.records,
          total: res.data.total
        };
      }).catch(() => {
        this.tableLoading = false;
      });
    },

    // 改变分页配置
    changePageOption(data) {
      this.getDataListData.page = data.page;
      this.getDataListData.size = data.size;
      this.getDataList(); // 查询列表
    },

    // 更改文章类型选择
    changeArticleType(item) {
      this.articleType = item;
      this.getDataList(); // 列表查询
    },

    // 打开文章详情弹窗
    openArticleDialog(row, index) {
      this.viewDialog.title = `文章-${row.title}`;
      this.viewDialog.visible = true;
      this.rowIndex = index;
    },

    // 跳转文章详情页面
    goToArticleDetailView(id) {
      this.$router.push({ path: '/article-detail-view', query: { id: id }});
    },

    // 跳转文章更多页面
    goToArticleMoreView(id) {
      this.$router.push({ path: '/article-more-view', query: { id: id }});
    }
  }
};
</script>

<style lang="scss" scoped>
.article-management-style {
  height: 100%;
  .content {
    position: relative;
    background-color: #ffffff;
    padding: 30px 30px 20px 30px;
    .content-header {
      height: 36px;
      display: flex;
      align-items: center;
      .content-header-vertical-bar {
        width: 7px;
        height: 26px;
        background: #409eff;
        border-radius: 4px;
        margin-right: 13px;
      }
      .content-header-title {
        font-size: 28px;
      }
    }
  }
  .table-style {
    padding: 0 28px 20px 28px;
    background-color: #ffffff;
  }
  .page-box {
    padding: 0 28px 10px 28px;
    background-color: #ffffff;
  }
}
</style>
